<template>
	<view class="listWaper">
		<list ref="list" :requestApi='requestApi' :beforeRequest='beforeRequest' :responeseHandle='responeseHandle'>
			<template v-slot:topSlot>
				<div class="other">
					顶部插槽
				</div>
			</template>

			<template v-slot:default='{data}'>
				<view class="panel">{{data.index}}</view>
			</template>
		</list>
	</view>
</template>

<script>
	import list from '@/components/list.vue'
	export default {
		data() {
			return {
				list: [],
				total: 0
			}
		},
		components: {
			list
		},
		onPullDownRefresh() {
			this.$refs.list.onRefresh()
		},

		methods: {
			requestApi() {
				return new Promise((res) => {
					setTimeout(() => {
						const arr = new Array(10).fill(0)
						this.list.push(...arr)
						const radom = Math.random() > 0.3
						console.log(radom ? '成功' : '失败');
						res({
							success: radom,
							data: {
								list: [...arr],
								total: 100
							}
						})
					}, 1000)
				})
			},
			beforeRequest(data) {
				return data
			},
			responeseHandle(data) {
				return data.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listWaper {
		width: 100%;
		height: calc(100vh - 44px);
		overflow-y: auto;

		.other {
			width: 100%;
			height: 300px;
			font-size: 20px;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.panel {
			width: 100%;
			height: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20px;
			font-weight: 600;
			background-color: antiquewhite;
		}
	}
</style>
